@mistercrunch see north star design for add chart to new dashboard

For the After image: The text field under radio buttons would benefit by adding a title so that its clear what the field is for. See SIP-34 screenshot you posted. Also I think "Save Chart" is more direct than "Save a Chart". "Save a Chart" implies unnecessary ambiguity in the statement.

@Steejay , I decided to use the "CreatableSelect" component feature from react-select to avoid having to build the select box.

I also improved the e2e cypress tests quite a bit, fixed and re-enabled tests that had been disabled.

Codecov Report

Merging #10355 into master will decrease coverage by 4.28%.
The diff coverage is 95.83%.

@@            Coverage Diff             @@
##           master   #10355      +/-   ##
==========================================
- Coverage   69.70%   65.42%   -4.29%     
==========================================
  Files         196      603     +407     
  Lines       18950    32393   +13443     
  Branches        0     3287    +3287     
==========================================
+ Hits        13210    21194    +7984     
- Misses       5740    11015    +5275     
- Partials        0      184     +184     

Flags with carried forward coverage won't be shown. Click here to find out more.

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1a41ea4...32b0f52. Read the comment docs.

@Steejay , I decided to use the "CreatableSelect" component feature from react-select to avoid having to build the select box.

I also improved the e2e cypress tests quite a bit, fixed and re-enabled tests that had been disabled.

The more I look at this the more I'm agonizing over the 🔘 Save (overwrite) 🔘 Save As choice.

Could it just be:

Save as:
[SomeChartame         ]
⚠️ Warning: This will overwrite the current *SomeChartame* chart

^ Just displaying an overwrite warning, rather than forcing a choice?

Save as:
[SomeChartame         ]
⚠️ Warning: This will overwrite the current *SomeChartame* chart

^ Just displaying an overwrite warning, rather than forcing a choice?

I don't think this works as two charts can have the same title. Sometimes users just want to save a new copy of a chart and play with it.

I also feel CreatableSelect is not quite clear as the original radio buttons. Maybe keep it as is before we implement the SIP-34 design?

@ktmud I don't have data to back this up, but the "save AND create a new dashboard" is not super common, it's still very much possible and discoverable IMHO.

I think the previous modal looks awful and is super confusing. I'd hate to shelf this because it's not 100% SIP-34. This PR also re-enables/improves many unit tests and removes a lot of unneeded complexity.

@ktmud if the concern is the "create dashboard" is not discoverable enough, I can think of ways to improve that, like bolding the words "Create" and "Select" in the placeholder of the dashboard dropdown

Proposing two options:

• Bolded

• Capitalized and bolded

I prefer option 1. All caps is a little too aggressive/dominating. Additionally, the header should read "Save Chart" not "Save A Chart". Can we add the title "Chart Name*" above the text field as well?

see comments in #10355 (comment)

Latest:

@ktmud I'd love your blessing on this, but I think this is solid mergeable progress and a good checkpoint in the right direction

Latest, with the new control-label

This design is definitely much cleaner than the existing layout. I'm OK with merging as is but would love to see the new iteration soon. A placeholder text still doesn't look as discoverable as the inline input in SIP-34 or the radio buttons in old design.

Another problem with current CreatableSelect is that it blocks users from creating a new dashboard with the same name as some existing dashboards.

Impacts #8976